<template>
  <div class="index" >
      <div class="hotwork">
          <ul>
              <li v-for="(recruit,index) in recruitlist" :key="index">
                  <div class="job">
                      <span class="jobs">{{recruit.jobs}}</span>
                    <span class="salary">{{recruit.salary}}</span>
                    <a class="eduname">{{recruit.eduname}}</a>
                  </div>
                  <div class="company">
                      <span class="companyname">{{recruit.companyname}}</span>
                      <span class="placename">{{recruit.placename}}</span>
                  </div>
                  <div class="btn">
                      <el-button type="success" @click="RecruitDetail(recruit)">查看详情</el-button>
                  </div>
                  
                  
              </li>
          </ul>
          
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            //获取招聘列表的参数
            queryInfo:{
                querystring:'',
                pagenum:1,
                pagesize:8
            },
            recruitlist:[],
            
        }
    },
    created(){
        this.getrecruitlist()
    },
    methods:{
        //获取所有岗位
        async getrecruitlist(){
            const {data:res} =await this.$http.get('recruit',{params:this.queryInfo})
            if(res.meta.status!=200) return this.$message.error(res.meta.msg)
            this.recruitlist=res.data.records
            this.total=res.data.total
        },
        async RecruitDetail(recruit){
        window.sessionStorage.setItem('place',recruit.place)
        window.sessionStorage.setItem("Recruitid",recruit.id)
        this.$router.push("/RecruitDetail")

    }
    }

}
</script>

<style lang="less" scoped>
.hotwork{
    li{
        padding: 10px 0px 0 20px;
        list-style-type:none;
        margin: 0 auto;
        background-color: pink;
        width: 80%;
        height: 145px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 10px;
        .job{
            margin-top: 15px;
            width: 33%;
        }
        .company{
            width: 33%;
        }
        .btn{
            float: right;
            padding-right: 116px;
            padding-top: 30px;
            
        }
        .jobs{
            font-size: 23px;
            font-weight:700;
            display: block;
            margin-bottom: 10px;
        }
        .salary{
            font-size: 20px;
            font-weight:600;
            display: block;
            margin-bottom: 10px;
            color: red;
        }
        .eduname{
            font-size: 14px;
            margin-bottom: 10px;
            color: #7D6695;
            background-color: #F6F7F8;
            text-align: center;
            border-radius: 12px;
            padding:5px 8px 5px 8px;
        }
        .company{
            padding-left: 20px;
        }
        .companyname{
            font-size: 18px;
            margin: 22px 0 15px 0;
            font-weight:700;
        }
        .placename{
            color: #999999;
        }
        div{
            float: left;
        }
        span{
            display: block;
        }

    }
    li:hover{
        box-shadow: 1px 1px 5px #888888;
    }
}
</style>